<template>
	<div>
		<!--详情界面-->
		<el-dialog title="方案详情" :visible.sync="dialogVisible" size="large" :close-on-press-escape="false" :before-close="off" :top="dialog_margin_top">
			  <el-form label-width="160px" >
			  <el-row :span="24">
			  	<el-col :span="8">
			  		<el-form-item label="方案类型" required>
	  					<el-select v-model="formData.plantype" filterable size="small"  disabled>
							<el-option v-for="item in planTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="险种代码" required>
						<el-select v-model="formData.risk" value-key="riskcode" size="small"  disabled >
							<el-option v-for="item in riskOptions" :key="item.riskcode" :label="item.riskcode + '-' + item.riskcname" :value="item"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="方案代码" required>
						<el-input v-model="formData.plancode" size="small"  readonly ></el-input>
					</el-form-item>
					<el-form-item label="是否自动核保" required>
						<el-select v-model="formData.autoundwrt" filterable size="small"  disabled>
							<el-option v-for="item in autoUndwrtOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="方案有效性" required>
						<el-select v-model="formData.validstatus" size="small"  disabled>
							<el-option v-for="item in validOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="方案中文名称" required>
						<el-input v-model="formData.plancname" size="small" :maxlength="255" readonly ></el-input>
					</el-form-item>
			  	</el-col>
			  	<el-col :span="8">
					<el-form-item label="方案英文名称" required>
						<el-input v-model="formData.planename" size="small" :maxlength="255" readonly></el-input>
					</el-form-item>
					<el-form-item label="行程目的地">
						<el-input v-model="formData.traveldestination" size="small" :maxlength="500" readonly></el-input>
					</el-form-item>
					<el-form-item label="职业分类代码">
						<el-input v-model="formData.occupationcode" size="small" :maxlength="10" readonly></el-input>
					</el-form-item>
					<el-form-item label="条款是否允许删除" required>
						<el-select v-model="formData.delflag" disabled size="small" >
							<el-option v-for="item in delFlagOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="条款代码" required>
						<el-input v-model="formData.kindcodes" :title="formData.kindcodes" size="small" readonly></el-input>
					</el-form-item>
          <el-form-item label="自动单证审核通过" required>
            <el-select v-model="formData.autodoc" filterable size="small" disabled>
              <el-option v-for="item in autoDocOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
			  	</el-col>
			  	<el-col :span="8">
					<el-form-item label="责任代码">
						<el-input v-model="formData.itemcodes" :title="formData.itemcodes" size="small" readonly></el-input>
					</el-form-item>
					<el-form-item label="预设保险期限方式">
						<el-select v-model="formData.periodtype" size="small"  disabled>
							<el-option v-for="item in periodTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="预设保险期限值">
						<el-input v-model="formData.period" size="small" :maxlength="5" readonly></el-input>
					</el-form-item>
					<el-form-item label="方案权限适用机构">
						<el-input type="textarea" v-model="formData.applycomcode" :title="formData.applycomcode" size="small" readonly disabled></el-input>
					</el-form-item>
					<el-form-item label="方案权限适用渠道">
						<el-input type="textarea" v-model="formData.applychannel" :title="formData.applychannel" size="small" readonly disabled></el-input>
					</el-form-item>
			  	</el-col>
			  </el-row>
			</el-form>

			<el-row type="flex" :span="24" justify="space-around" v-loading="loading" element-loading-text="条款加载中......">
				<el-col :span="24">
						<el-table :data="formData.kinditems" :highlight-current-row="true">
							<el-table-column prop="kindcode" label="条款代码" width="110"></el-table-column>
							<el-table-column prop="kindcname" label="条款名称" show-overflow-tooltip width="180"></el-table-column>
							<el-table-column prop="itemcode" label="责任代码" width="120"></el-table-column>
							<el-table-column prop="itemcname" label="责任名称" show-overflow-tooltip min-width="180"></el-table-column>
							<el-table-column prop="ownerFlag" label="责任归属" show-overflow-tooltip min-width="180"></el-table-column>
							<el-table-column prop="quantity" label="投保份数" show-overflow-tooltip min-width="100"></el-table-column>
							<el-table-column prop="currency" label="条款币别" show-overflow-tooltip min-width="100"></el-table-column>
							<el-table-column prop="amount" label="保额" show-overflow-tooltip min-width="100"></el-table-column>
							<el-table-column prop="premium" label="保费" show-overflow-tooltip min-width="100"></el-table-column>
							<el-table-column prop="unitamount" label="单位保额" show-overflow-tooltip min-width="100"></el-table-column>
							<el-table-column prop="unitpremium" label="单位保费" show-overflow-tooltip min-width="100"></el-table-column>
							<el-table-column prop="rate" label="最终费率(%)" show-overflow-tooltip min-width="120"></el-table-column>
							<el-table-column prop="discount" label="折扣率(%)" show-overflow-tooltip min-width="120"></el-table-column>
							<!-- <el-table-column prop="oper" label="保额保费" width="150">
							      <template scope="props">
								<el-button type="default" size="small" @click="openAmountPremiumAddDialog(props.row)"><i class="fa fa-arrow-right"></i> 查看</el-button>
							      </template>
							</el-table-column> -->
						</el-table>
				</el-col>
			</el-row>

			  <span slot="footer" class="dialog-footer">
				   <el-button @click="off">关闭</el-button>
			  </span>
		</el-dialog>
		<AmountPremiumAdd  v-if="showAmountPremiumAddDialog"></AmountPremiumAdd>
	</div>
</template>

<script>
import PlanAPI from "../../../../js/production/plan/planAPI"
import AmountPremiumAdd from "./AmountPremiumAdd";
export default {
  	components : {
	  AmountPremiumAdd,
	},
	data() {
		return {
			dialogVisible: true,
			dialog_margin_top: '1%',
			loading: false,
			formData: {
				plantype : '',
				risk: null,
				plancode : '',
				plancname : '',
				planename : '',
				validstatus : '',
				kindcodes : '',
				kinds: [],
				itemcodes : '',
				items: [],
				kinditems: [],
				delflag :'',
				autoundwrt : '',
				autodoc : '',
				traveldestination : '',
				periodtype: '',
				period: '',
				applycomcode: '',
				applychannel: '',
				occupationcode: '',

			},
			cacheKindItems: [],
			planTypeOptions: [
				{label : 'a-非定额', value : 'a'},
				{label : 'b-定额定险别', value : 'b'},
				{label : 'c-定险别定费率', value : 'c'},
				{label : 'd-定额定险别定费率定保费', value : 'd'},
			],
			periodTypeOptions: [
				{label : '天', value : '3'},
			],
			riskOptions : [],
			validOptions: [
				{label : '1-有效',value: '1'},
				{label : '0-无效',value: '0'}
			],
			delFlagOptions: [
				{label : '1-是',value: '1'},
				{label : '0-否',value: '0'}
			],
			autoUndwrtOptions: [
        {label: '默认',  value: ''},
				{label: 'Y-是',  value: 'Y'},
				{label: 'N-否 ',  value: 'N'},
			],
      autoDocOptions: [
        {label: '默认',  value: null},
        {label: 'Y-是',  value: 'Y'},
        {label: 'N-否 ',  value: 'N'},
      ],
			showRiskKindSelectDialog: false,
			showItemCodeSelectDialog: false,
			showAmountPremiumAddDialog: false,
			currentKindItem: {},
		}
	},
	mounted() {
		PlanAPI.initRiskSelect(this);
		this.formData = Object.assign({}, this.$parent.rowDetail);
		this.formData.risk = {
			riskcode: this.formData.riskcode,
			riskversion: this.formData.riskversion
		};
		PlanAPI.initKindItems(this);
	},
	methods: {
		off() {
			this.$parent.showDetailDialog = false;
		},
		openAmountPremiumAddDialog(row) {
			this.currentKindItem = row;
			this.showAmountPremiumAddDialog = true;
		},
	}
  }
</script>
